<!-- 
 * @description: 卡片带标题的
 * @fileName: index.vue 
 * @author: 金凯
 * @Lastauthor: 金凯
 * @date: 2024-08-12 08:59:49
 * @LastEditTime: 2024-08-16 09:32:12
 * @version: V1.0.0 
!-->
<template>
	<div class="card">
		<div class="title-left-tip mb10">
			<h2>{{ title }}</h2>
			<div class="flex flex-align-center">
				<div class="tabs-list" v-if="tabList.length > 0">
					<div
						:class="['tab-item', { active: index === tabIndex }]"
						v-for="(item, index) in tabList"
						:key="item.value"
						:label="item.label"
						@click="handleClick(item.value, index)"
					>
						{{ item.label }}
					</div>
				</div>
				<el-select
					v-model="statisticSelect"
					filterable
					clearable
					:placeholder="selectPlaceholder"
					v-if="selectOptions.length > 0"
					@change="changeSelect"
				>
					<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<el-date-picker
					v-if="showDate"
					v-model="statisticsDate"
					class="ml10"
					@change="changeDate"
					:clearable="clearable"
					type="datetimerange"
					range-separator="-"
					:value-format="valueFormat"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
				/>
				<el-button type="primary" :icon="Download" @click="downloadFile" v-if="showDownFile" class="ml10">导出</el-button>
				<el-link type="primary" @click="checkMore" v-if="showMore">更多</el-link>
			</div>
		</div>
		<slot></slot>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Download } from '@element-plus/icons-vue';
const tabIndex = ref(0);
const statisticsDate = ref<string | number[]>([]);
const statisticSelect = ref('');
interface Card {
	title?: string;
	tabList?: Array<{ label: string; value: string }>;
	showMore?: boolean;
	showDownFile?: boolean;
	showDate?: boolean;
	selectOptions?: Array<{ label: string; value: string }>;
	selectPlaceholder?: string;
	clearable?: boolean;
	defaultDate?: string | number[];
	valueFormat?: string;
}
const props = withDefaults(defineProps<Card>(), {
	tabList: () => [],
	showMore: false,
	showDownFile: false,
	showDate: true,
	selectOptions: () => [],
	selectPlaceholder: '请选择科室',
	clearable: false,
	defaultDate: () => []
});

watch(
	() => props.defaultDate,
	(newVal: any) => {
		statisticsDate.value = newVal;
	},
	{ immediate: true, deep: true }
);

interface ModelEmits {
	(e: 'handleClick', value: string): void;
	(e: 'checkMore'): void;
	(e: 'downloadFile'): void;
	(e: 'changeDate', value: string | number[]): void;
	(e: 'changeSelect', value: string): void;
}
const emit = defineEmits<ModelEmits>();
// 点击tab
const handleClick = (value: string, index: number) => {
	tabIndex.value = index;
	emit('handleClick', value);
};

// 更多
const checkMore = () => {
	emit('checkMore');
};

// 导出
const downloadFile = () => {
	console.log('下载222');
	emit('downloadFile');
};

// 日期选择
const changeDate = (value: any) => {
	emit('changeDate', value);
};

// 选择
const changeSelect = () => {
	emit('changeSelect', statisticSelect.value);
};

defineExpose({ statisticsDate });
</script>

<style scoped lang="scss">
.title-left-tip {
	display: flex;
	justify-content: space-between;
}
.tabs-list {
	// position: absolute;
	// top: 0;
	// right: 16px;
	display: flex;
	align-items: center;
	line-height: 24px;
	.tab-item {
		position: relative;
		padding: 0 12px 2px;
		cursor: pointer;
		transition: all 0.2s linear;
		&::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 100%;
			content: '';
			border-bottom: 2px solid transparent;
			transition: all 0.2s linear;
			transform: translateX(-50%) scaleX(0);
		}
		&:hover {
			color: var(--el-color-primary);
		}
		&.active {
			&::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 100%;
				content: '';
				border-bottom: 2px solid var(--el-color-primary);
				transform: translateX(-50%) scaleX(1);
			}
		}
	}
}
</style>
